import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { observer, inject } from 'mobx-react'
import { Carousel, Flex } from 'antd-mobile'
import { toJS } from 'mobx'
import placeholderMd from 'assets/common/placeholder-md.png'
import '../msite/msite.scss'

@inject('creditStore', 'pictureStore')
@observer
class CreditCard extends Component {
  static propTypes = {
    creditStore: PropTypes.object.isRequired,
    pictureStore: PropTypes.object.isRequired,
  };

  componentDidMount() {
    this.props.creditStore.getHotApplyList()
    this.props.creditStore.getRecommendList()
    this.props.pictureStore.getCreditBaner()
  }

  bannerClick = (url) => {
    let href = url
    if (!href.startsWith('http')) {
      href = `http://${href}`
    }

    stat({
      category: '信用卡banner',
      action: '点击信用卡banner',
      label: href,
      callback() {
        window.location.href = href
      },
    })
  };

  itemClick = (url, type) => {
    const category = type === 1 ? '小编推荐' : '热门申请'
    stat({
      category,
      action: `点击${category}`,
      label: url,
      callback() {
        window.location.href = url
      },
    })
  };

  render() {
    const { pictureStore, creditStore } = this.props
    const creditBanerList = toJS(pictureStore.creditBanerList)
    const recommendList = toJS(creditStore.recommendList)
    const hotApplyList = toJS(creditStore.hotApplyList).slice(0, 4)

    return (
      <div className="main-content">
        {creditBanerList.length ?
          <Carousel
            styleName="carousel"
            autoplay
            infinite
            dots={false}
          >
            {creditBanerList.map(item => (
              <img
                key={item.id}
                styleName="banner"
                src={item.pic}
                alt="banner"
                role="presentation"
                onClick={evt => this.bannerClick(item.link, evt)}
              />
            ))}
          </Carousel>
          : <img
            src={placeholderMd}
            className="img-block"
            styleName="placeholder-md"
            alt="有米贷"
          />
        }
        <div className="am-list-header">热门申请</div>
        <div styleName="hotApply-box">
          {hotApplyList.map(item => (
            <div
              key={item.id}
              styleName="hotApply-wrapper"
              onClick={() => this.itemClick(item.link, 1)}
            >
              <Flex styleName="hotApply-content">
                <img src={item.logo} alt="" />
                <Flex.Item>
                  <p styleName="hotApply-title">{item.name}</p>
                  <p styleName="hotApply-describ">{item.describ}</p>
                </Flex.Item>
              </Flex>
            </div>
          ))}
        </div>
        <div className="am-list-header">小编推荐</div>
        <div styleName="recommend-box">
          {recommendList.map(item => (
            <div
              styleName="recommend-wrapper"
              key={item.id}
              onClick={() => this.itemClick(item.link, 2)}
            >
              <Flex>
                <img src={item.logo} alt="" />
                <Flex.Item>
                  <p styleName="hotApply-title">{item.name}</p>
                  <p className="erythrine" styleName="hotApply-describ">{item.describ}</p>
                </Flex.Item>
              </Flex>
              <p styleName="recommend-reason">
                <span className="erythrine">推荐理由：</span>{item.reasons}
              </p>
            </div>
          ))}
        </div>
      </div>
    )
  }
}

export default CreditCard
